/* 
* 默认设定区 
* #f5f5f5
*/
$main-color:#333;
$full: 100%;
$nav-height: 60px;


/* 响应式大小设定 */
$large-screen : 1200px;
$mid-screen : 992px;
$normal-screen : 768px;
$small-screen : 480px;

@mixin flex-flow-cc($direction, $wrap, $justify-content, $align-items, $align-content) {
    display: flex;
    -webkit-flex-direction: $direction;
    /* Safari */
    flex-direction: $direction;
    -webkit-flex-wrap: $wrap;
    /* Safari */
    flex-wrap: $wrap;
    //复用功能
    -webkit-flex-flow: $direction $wrap;
    /* Safari */
    flex-flow: $direction $wrap;
    -webkit-justify-content: $justify-content;
    justify-content: $justify-content;
    -webkit-align-items: $align-items;
    /* Safari */
    align-items: $align-items;
    -webkit-align-content: $align-content;
    /* Safari */
    align-content: $align-content;
}


@mixin transition-cc($value) {
    transition: $value;
    -moz-transition: $value;
    -webkit-transition: $value;
    -o-transition: $value;
}

@mixin box-shadow-cc($value) {
        //box-shadow: h-shadow v-shadow blur spread color inset;
        -moz-box-shadow: $value;
        -webkit-box-shadow: $value;
        box-shadow: $value;
}


/* 
* 样式代码区
*/

.navigator-box {
    position: fixed;
    top: 0;
    left: 0;
    background-color: $main-color;
    height: $nav-height;
    width: $full;
    @include box-shadow-cc(2px 2px 10px #282828);
    z-index: 999999;

    > div  {
        > svg{
            display: none;
           
            position: fixed;
            right: 0;
            padding: 15px 2em 0 0;
        }
        > img {
            height: 60px;
            position: fixed;
            padding-left: 2em;
        }
    }
    ul {
        display: flex !important;
        padding-right: 2em;
        //flex父容器，a标签为他的子项
        @include flex-flow-cc(row, nowrap, flex-end, center, flex-start);

        a {
            font-size: 18px;
            color: #fff;
            line-height: $nav-height/2;
            text-decoration: none;

            li {
                padding: 0 0.5em 0 0.5em;
                list-style: none;
                div {
                    display: none;
                }
            }

            &:hover {
                transition: all 0.8s;
                color: #008b8b;
                // text-decoration: underline;
            }
        }
    }

    @include transition-cc(all 1s);
    &.hidden-cc {
        transform: translateY(-66px);

    }
}

@media screen and (max-width: $large-screen) {


    .navigator-box {
        > div > svg {
            display: block;
        }
        ul {
            display: none !important;
            margin: 4.5em 1em 0 1em;
            padding: 1em 0 1em 0;
            background-color: white;
            @include flex-flow-cc(column, nowrap, space-around, flex-start, flex-start);
            @include box-shadow-cc(2px 2px 10px  #333);
            a {
                color: #333;
                border-bottom: 1px solid rgba(120,130,150,.15);
                width: 100%;
                &:hover{
                    color: #fff;
                    background-color: #909090;
                    transition: all 0s;
                }
                li {
                    text-indent: 1em;
                    padding: 0.5em 1em 0.5em 1em !important;
                    div {
                        display: inline-flex !important;
                        float: right;
                    }
                }
            }


        }
    }
}